<template>
  <a-locale-provider :locale="locale">
    <div id="app">
      <div style="">
        <a-alert :message="successTitle" type="success" show-icon v-if="successShow"/>
        <a-alert :message="errorTitle" type="warning" show-icon v-if="errorShow"/>
      </div>

      <div id="main" :style="{'height':showFooter?'calc(100% - 25px)':'100%'}">
        <router-view v-if="isRouterAlive" />
      </div>
      <set-pwd-modal ref="SetPwdModal" v-if="modalVisible"></set-pwd-modal>
      <div  id="footer" v-show="showFooter">
        <div class="copyright" >
          <span style="margin: 10px">武汉楚誉科技股份有限公司 </span>
        </div>
      </div>
    </div>
  </a-locale-provider>
</template>

<script>
/* eslint-disable */
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import { AppDeviceEnquire } from '@/utils/mixin'
import SetPwdModal from '@/hzjComponents/SetPwdModal'
export default {
  mixins: [AppDeviceEnquire],
  provide(){
    return {
      upShow: this.upShow ,
      reload: this.reload,
      SetPwdModal:this.SetPwdModal
    }
  },
  components: {
    SetPwdModal
  },
  data () {
    return {
      locale: zhCN,
      isRouterAlive:true,
      successShow: false,
      errorShow: false,
      successTitle: '成功',
      errorTitle: '错误',
      modalVisible:false,
      showFooter: false
    }
  },
  mounted () {
//    this.openInfoNotification();
//    this.openShortNotification();
//    this.openChatNotification();
  },
  watch:{
    $route:{
      handler(val,oldval){
        if(val.path.indexOf("login")!=-1){
          this.showFooter = false;
        }else{
          this.showFooter = true;
        }
      },
      // 深度观察监听
      deep: true
    }
  },
  methods:{
    reload(){
      this.isRouterAlive =  false
      this.$nextTick(
        function () {
          this.isRouterAlive =  true
        }
      )
    },
    upShow(type,title) {
      if(type === 1) {
        this.successShow = true;
        if(title) {
          this.successTitle = title
        }
        setTimeout(() => {
          this.successShow = false;
          this.successTitle = '成功'
        }, 3000)
      }else {
        this.errorShow = true;
        if(title) {
          this.errorTitle = title
        }
        setTimeout(() => {
          this.errorShow = false;
          this.errorTitle = '错误'
        }, 3000)
      }
    },
    SetPwdModal(){
      this.modalVisible = true;
      this.$nextTick(() => {
        this.$refs.SetPwdModal.init()
      })
    },
//    openInfoNotification() {
//      let self = this;
//      this.$notification.open({
//        key:'info',
//        message: '资讯发布',
//        description:
//          '您有一条新的资讯',
//        icon: <a-icon type="message" style="color: #108ee9"/>,
//        duration: 0,
//        placement: 'bottomRight',
//        onClick:function(){
//          self.$router.push("/revenue/message/info");
//          self.$notification.close('info')
//        }
//      })
//    },
//    openShortNotification() {
//      let self = this;
//      this.$notification.open({
//        key:'short',
//        message: '短信下发',
//        description:
//          '您有一条新的短信',
//        icon: <a-icon type="message" style="color: #108ee9"/>,
//        duration: 0,
//        placement: 'bottomRight',
//        onClick:function(){
//          self.$router.push("/revenue/message/short");
//          self.$notification.close('short')
//        }
//      })
//    },
    openChatNotification() {
      let self = this;
      this.$notification.open({
        key:'chat',
        message: '聊天',
        description:
          '您有一条新的聊天信息',
        icon: <a-icon type="message" style="color: #108ee9"/>,
        duration: 0,
        placement: 'bottomRight',
        onClick:function(){
        self.$router.push("/revenue/message/chat");
        self.$notification.close('chat')
      }
    })
    }
  }
}
</script>
<style lang="less">
  #main {
    height:calc(100% - 25px) ;
    overflow: auto;
  }
  #footer {
    height: 25px;text-align: center;line-height: 25px;font-size: 16px;position: fixed;bottom: 0;width: 100%;background: #001529;color: white;
  }
  #app {
    height: 100%;
  /deep/
  .ant-alert {
    font-size: 20px;
    text-align: center;
    z-index: 99999;
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translate(-50%,0);
    .anticon {
      position: initial;
      margin-right: 10px;
    }
  }
    /* 文字只显示一行，超出部分省略号 */
    .one-line-ellipsis{
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }


    /* 多行文本溢出隐藏，其他行数结合下面的行数运用 */
    .mult_line-ellipsis{
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }

</style>
